.kaitify-popover-refer {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  margin: 0;
  position: relative;
  color: @font-color;
  font-size: @font-size;
  line-height: @line-height;
  font-family: @font-family;
  box-sizing: border-box;

  &.kaitify-dark {
    color: @font-color-dark;
  }
}

.kaitify-popover {
  &,
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    outline: none;
  }

  &[data-placement^='bottom'] {
    padding-top: @small-padding;

    &[data-arrow='true'] {
      padding-top: calc(@small-padding + 6px);
    }
  }
  &[data-placement^='top'] {
    padding-bottom: @small-padding;

    &[data-arrow='true'] {
      padding-bottom: calc(@small-padding + 6px);
    }
  }
  &[data-placement^='left'] {
    padding-right: @small-padding;

    &[data-arrow='true'] {
      padding-right: calc(@small-padding + 6px);
    }
  }
  &[data-placement^='right'] {
    padding-left: @small-padding;

    &[data-arrow='true'] {
      padding-left: calc(@small-padding + 6px);
    }
  }

  .kaitify-popover-wrapper {
    position: relative;
    background: @background-color;
    border: 1px solid @border-color;
    border-radius: @border-radius;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.06);
  }

  .kaitify-popover-content {
    display: block;
    color: @font-color;
    font-size: @font-size;
    font-family: @font-family;
    line-height: @line-height;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .kaitify-popover-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 6px;

    &::before {
      position: absolute;
      display: inline-block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-width: 5px;
      content: '';
    }

    &[data-placement^='bottom'] {
      border-top: none;
      border-bottom-color: @border-color;
      bottom: 100%;

      &::before {
        border-top: none;
        border-bottom-color: @background-color;
        left: 1px;
        top: 1.5px;
        right: auto;
        bottom: 0;
        margin-left: -6px;
      }
    }

    &[data-placement^='top'] {
      border-bottom: none;
      border-top-color: @border-color;
      top: 100%;

      &::before {
        border-bottom: none;
        border-top-color: @background-color;
        left: 1px;
        bottom: 1.5px;
        top: auto;
        right: auto;
        margin-left: -6px;
      }
    }

    &[data-placement='right'] {
      border-left: none;
      border-right-color: @border-color;
      right: 100%;

      &::before {
        border-left: none;
        border-right-color: @background-color;
        left: 1.5px;
        top: 1px;
        right: auto;
        bottom: auto;
        margin-top: -6px;
      }
    }

    &[data-placement='left'] {
      border-right: none;
      border-left-color: @border-color;
      left: 100%;

      &::before {
        border-right: none;
        border-left-color: @background-color;
        right: 1.5px;
        top: 1px;
        bottom: auto;
        left: auto;
        margin-top: -6px;
      }
    }
  }

  &.kaitify-dark {
    .kaitify-popover-wrapper {
      background: @background-color-dark;
      border-color: @border-color-dark;
    }

    .kaitify-popover-content {
      color: @font-color-dark;
    }

    .kaitify-popover-arrow {
      &[data-placement^='bottom'] {
        border-bottom-color: @border-color-dark;

        &::before {
          border-bottom-color: @background-color-dark;
        }
      }

      &[data-placement^='top'] {
        border-top-color: @border-color-dark;

        &::before {
          border-top-color: @background-color-dark;
        }
      }

      &[data-placement='right'] {
        border-left: none;
        border-right-color: @border-color-dark;
        right: 100%;

        &::before {
          border-right-color: @background-color-dark;
        }
      }

      &[data-placement='left'] {
        border-left-color: @border-color-dark;

        &::before {
          border-left-color: @background-color-dark;
        }
      }
    }
  }
}

.kaitify-popover-fade-enter-from,
.kaitify-popover-fade-leave-to {
  opacity: 0;
}

.kaitify-popover-fade-enter-active,
.kaitify-popover-fade-leave-active {
  transition: opacity 200ms linear;
}

.kaitify-popover-translate-enter-from,
.kaitify-popover-translate-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.kaitify-popover-translate-enter-active,
.kaitify-popover-translate-leave-active {
  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
}
